<template>
  <div class="container">
    <!-- 头部区域 -->
    <div class="header">
      <div class="hd-left">
        <span class="c-m-r-10 c-font-14">区域名称</span>
        <el-input
          placeholder="请输入区域名称"
          size="mini"
          style="width: 200px; margin-right: 10px"
          v-model="filterText"
        ></el-input>
        <TsButton
          label="搜索"
          perms="areas:$id:children"
          size="mini"
          type="primary"
          @click="search"
          >搜索</TsButton
        >
        <el-button size="mini" @click="reset">重置</el-button>
      </div>
      <div class="hd-right">
        <TsButton
          perms="areas:post"
          label="新增"
          size="mini"
          type="primary"
          @click="addParent"
        >
        </TsButton>
      </div>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table
        :data="tableData"
        ref="tableRef"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        @filter-change="filterChange"
        filter-placement="bottom-end"
        :header-cell-style="{ background: '#FEF6F6' }"
      >
        <el-table-column prop="name" label="区域" />
        <el-table-column prop="description" label="区域描述" />
        <el-table-column label="操作">
          <template #default="scope">
            <div class="btns">
              <TsButton
                perms="areas:post"
                label="添加"
                icon="el-icon-circle-plus-outline"
                type="text"
                size="mini"
                @click="addParent(scope.row)"
              >
              </TsButton>
              <TsButton
                perms="areas:$id:put"
                label="编辑"
                icon="el-icon-edit"
                type="text"
                size="mini"
                @click="edit(scope.row)"
              >
              </TsButton>
              <TsButton
                perms="areas:$id:delete"
                label="删除"
                icon="el-icon-delete"
                type="text"
                size="mini"
                style="color: #ff5d5d"
                @click="del(scope.row.id)"
              >
              </TsButton>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--    添加对话框-->
    <el-dialog v-model="addDialogVisible" title="新增" width="30%">
      <el-form ref="addFormRef" :model="addForm">
        <el-form-item label="名称" prop="name">
          <el-input v-model="addForm.name" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input
            type="textarea"
            v-model="addForm.desc"
            placeholder="请输入描述信息"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submitParent">确定</el-button>
          <el-button @click="addDialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <!--    编辑对话框-->
    <el-dialog v-model="editDialogVisible" title="编辑" width="30%">
      <el-form ref="form" :model="editForm">
        <el-form-item label="名称">
          <el-input v-model="editForm.name" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            type="textarea"
            v-model="editForm.description"
            placeholder="请输入描述信息"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submitEdit">确定</el-button>
          <el-button @click="editDialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import RegionalSettings from "@/composables/system/regional-settings.js";
import TsButton from "../../components/TsButton";

export default {
  components: { TsButton },
  setup() {
    const {
      search,
      filterText,
      reset,
      tableData,
      del,
      addParent,
      addDialogVisible,
      addForm,
      edit,
      editDialogVisible,
      parentOption,
      submitParent,
      addFormRef,
      editForm,
      filterChange,
      tableRef,
      submitEdit,
    } = RegionalSettings();
    return {
      reset,
      filterText,
      tableData,
      editForm,
      parentOption,
      addFormRef,
      del,
      editDialogVisible,
      edit,
      addDialogVisible,
      addForm,
      addParent,
      submitParent,
      filterChange,
      tableRef,
      submitEdit,
      search,
    };
  },
};
</script>

<style lang="scss" scoped>
.container {
  height: calc(100vh - 200px);
  background: #ffffff;
  box-shadow: 0 0 16px rgba(96, 96, 96, 0.16);
  opacity: 1;
  border-radius: 6px;
  padding: 10px 20px;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .hd-left {
      display: flex;
      align-items: center;
    }
  }

  .table {
    margin-top: 10px;
    overflow-y: auto;
  }
}
</style>
